<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="f"%>
<%@ taglib uri="/WEB-INF/tld/tag.tld" prefix="my"%>
<%@ taglib uri="/WEB-INF/tld/mobai-el-common.tld" prefix="el"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<!DOCTYPE html PUBLIC>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<title>用户管理</title>
<link rel="stylesheet" type="text/css"
	href="/three/static/h-ui/css/H-ui.min.css" />
<link rel="stylesheet" type="text/css"
	href="/three/static/h-ui.admin/css/H-ui.admin.css" />
<link rel="stylesheet" type="text/css"
	href="/three/lib/Hui-iconfont/1.0.8/iconfont.css" />
<link rel="stylesheet" type="text/css"
	href="/three/static/h-ui.admin/skin/default/skin.css" id="skin" />
<link rel="stylesheet" type="text/css"
	href="/three/static/h-ui.admin/css/style.css" />
<link rel="stylesheet" type="text/css"
	href="/three/lib/zTree/v3/css/zTreeStyle/zTreeStyle.css" />
</head>
<body class="pos-r">
	<form action="/three/user/list" method="post" id="form1">
		<div class="pos-a"
			style="width: 200px; left: 0; top: 0; bottom: 0; height: 100%; border-right: 1px solid #e5e5e5; background-color: #f5f5f5; overflow: auto;">
			<ul id="tree" class="ztree"></ul>
		</div>
		<div style="margin-left: 200px;">
			<div class="pd-20">
				<div class="text-c">
					<table class="table">
						<tr>
							<td>用户账号：</td>
							<td><input class="input-text" type="text" name="acc"
								style="width: 150px; height: 25px"></td>
							<td>用户姓名：</td>
							<td><input class="input-text" type="text" name="uname"
								style="width: 150px; height: 25px"></td>
							<td>性别：</td>
							<td><select name="csex" class="select"
								style="width: 150px; height: 25px">
									<option value="">请选择</option>
									<option value="1">男</option>
									<option value="2">女</option>
									<option value="3">保密</option>
							</select></td>
						</tr>
						<tr>
							<td>手机号码：</td>
							<td><input class="input-text" type="text" name="cmobile"
								style="width: 150px; height: 25px" /></td>
							<td>邮箱：</td>
							<td><input class="input-text" type="text" name="cemail"
								style="width: 150px; height: 25px" /></td>
							<td>用户状态：</td>
							<td><select name="cstate" class="select"
								style="width: 150px; height: 25px">
									<option value="">请选择</option>
									<option value="1">正常</option>
									<option value="2">停用</option>
									<option value="3">锁定</option>
							</select></td>
						</tr>
						<tr>
							<td>创建日期：</td>
							<td><input type="text"
								onfocus="WdatePicker({ maxDate:'#F{$dp.$D(\'logmax\')||\'%y-%M-%d\'}' })"
								id="logmin" class="input-text Wdate" style="width: 100px;"
								name="startTime"> - <input type="text"
								onfocus="WdatePicker({ minDate:'#F{$dp.$D(\'logmin\')}',maxDate:'%y-%M-%d' })"
								id="logmax" class="input-text Wdate" style="width: 100px;"
								name="endTime"></td>
							<td colspan="4" align="right"><c:if
									test="${fn:contains(power,'user/list') }">
									<button type="submit" class="btn btn-primary">
										<i class="Hui-iconfont">&#xe665;</i>查询
									</button>
								</c:if>
								<button class="btn btn-primary" type="button" id="btn_reset">
									<i class="Hui-iconfont">&#xe68f;</i>重置
								</button></td>
						</tr>
					</table>
				</div>
				<c:if test="${fn:contains(power,'user/save') }">
					<div class="cl pd-5 bg-1 bk-gray mt-20">
						<span class="l">
							<button class="btn btn-primary" id="btn_add" type="button">
								<i class="Hui-iconfont">&#xe600;</i>用户新增
							</button>
						</span>
					</div>
				</c:if>
				<table
					class="table table-border table-bordered table-hover table-bg table-sort">
					<thead>
						<tr class="text-c">
							<th>用户账号</th>
							<th>用户名</th>
							<th>所属机构</th>
							<th>所属角色</th>
							<th>性别</th>
							<th>手机号</th>
							<th>邮箱</th>
							<th>用户状态</th>
							<th>创建时间</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody>
						<c:forEach items="${userList }" var="user">
							<tr class="text-c va-m">
								<td>${user.account }</td>
								<td>${user.username }</td>
								<td>${user.dept.deptName }</td>
								<td><my:getRoleName userId="${user.userId }"></my:getRoleName>
								</td>
								<td><c:if test="${user.sex=='1' }">
										<span>男</span>
									</c:if> <c:if test="${user.sex=='2' }">
										<span>女</span>
									</c:if> <c:if test="${user.sex=='3' }">
										<span>保密</span>
									</c:if></td>
								<td>${user.mobile }</td>
								<td>${user.email }</td>
								<td class="user-status"><c:if test="${user.status=='1' }">
										<span class="label label-success">正常</span>
									</c:if> <c:if test="${user.status=='2' }">
										<span class="label label-default">停用</span>
									</c:if> <c:if test="${user.status=='3' }">
										<span class="label label-danger">锁定</span>
									</c:if></td>
								<td><f:formatDate value="${user.createTime }"
										pattern="yyyy-MM-dd HH:mm:ss" /></td>
								<td class="f-14 user-manage"><c:if
										test="${fn:contains(power,'user/update') }">
										<a style="text-decoration: none"
											onclick='toupdate(${el:toJsonString(user)})' title="编辑">
											<i class="Hui-iconfont">&#xe6df;</i>
										</a>
									</c:if> <c:if test="${fn:contains(power,'user/move') }">
										<a class="ml-4" style="text-decoration: none"
											onclick='user_move(${el:toJsonString(user)})' title="移动">
											<i class="Hui-iconfont">&#xe67a;</i>
										</a>
									</c:if> <c:if test="${fn:contains(power,'user/delete') }">
										<a style="text-decoration: none" class="ml-4"
											href="/three/user/delete?userId=${user.userId }" title="删除">
											<i class="Hui-iconfont">&#xe6e2;</i>
										</a>
									</c:if></td>
							</tr>
						</c:forEach>
					</tbody>
				</table>
			</div>
		</div>
		<div id="myModal" class="modal fade" tabindex="-1" role="dialog"
			aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content radius">
					<div class="modal-header">
						<h3 class="modal-title">用户信息更新</h3>
						<a class="close" id="btn_gb" data-dismiss="modal"
							aria-hidden="true" href="javascript:void();">×</a>
					</div>
					<div class="modal-body">
						<input type="hidden" name="userId" id="userId"
							class="input-text radius" />
						<table class="table">
							<tr>
								<td>用户账号</td>
								<td><input type="text" name="account"
									class="input-text radius" id="account" /></td>
								<td>用户名</td>
								<td><input type="text" name="username"
									class="input-text radius" /></td>
							</tr>
							<tr>
								<td>密码</td>
								<td><input type="password" name="password"
									class="input-text radius" id="pass1" /></td>
								<td>确认密码</td>
								<td><input type="password" name="pass"
									class="input-text radius" id="pass2" /></td>
							</tr>
							<tr>
								<td>所属机构</td>
								<td>
									<div style="width: 190px;">
										<input id="citySel" class="btn disabled radius" type="text"
											onclick="showMenu(); return false;" readonly
											style="width: 165px;" />
										<div style="float: right; margin-top: 4px;"
											onclick="showMenu();">选择</div>
									</div> <input id="treeids" type="hidden" name="dept.deptId"
									class="input-text">
									<div id="menuContent" class="menuContent"
										style="display: none; position: absolute;">
										<ul id="treeDemo" class="ztree"></ul>
									</div>
								</td>
								<td>性别</td>
								<td><select name="sex" class="input-text radius"
									style="width: 195px;">
										<option value="1">男</option>
										<option value="2">女</option>
										<option value="3">保密</option>
								</select></td>
							</tr>
							<tr>
								<td>手机</td>
								<td><input type="text" name="mobile"
									class="input-text radius" /></td>
								<td>邮箱</td>
								<td><input type="email" name="email"
									class="input-text radius" /></td>
							</tr>
							<tr>
								<td>QQ</td>
								<td><input type="text" name="qq" class="input-text radius" /></td>
								<td>微信</td>
								<td><input type="text" name="wechat"
									class="input-text radius" /></td>

							</tr>
							<tr>
								<td>证件号</td>
								<td><input type="text" name="idno"
									class="input-text radius" /></td>
								<td>联系地址</td>
								<td><input type="text" name="address"
									class="input-text radius" /></td>
							</tr>
							<tr>
								<td>用户状态</td>
								<td><select name="status" class="input-text radius"
									style="width: 195px;">
										<option value="1">正常</option>
										<option value="2">停用</option>
										<option value="3">锁定</option>
								</select></td>
								<td>锁定次数</td>
								<td>
									<div style="width: 190px;">
										<div id="subtraction" style="float: left; margin-top: 5px;">
											<i class="Hui-iconfont">&#xe6a1;</i>
										</div>
										<input type="text" class="btn disabled radius" id="number"
											name="sortNo" value="1" style="width: 165px;">
										<div id="add" style="float: right; margin-top: 5px;">
											<i class="Hui-iconfont">&#xe600;</i>
										</div>
									</div>
								</td>
							</tr>
							<tr>
								<td>备注</td>
								<td colspan="3"><textarea name="remark" rows="5" cols="65"
										name="" class="textarea radius"></textarea></td>
							</tr>
						</table>
					</div>
					<div class="modal-footer">
						<button class="btn btn-primary" id="btn_save">保存</button>
						<button class="btn" id="btn_close" data-dismiss="modal"
							aria-hidden="true">关闭</button>
					</div>
				</div>
			</div>
		</div>
		<!-- 修改用户所属部门 -->
		<div id="moveModal" class="modal fade" tabindex="-1" role="dialog"
			aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content radius">
					<div class="modal-header">
						<h3 class="modal-title">移动用户所属部门机构</h3>
						<a class="close" data-dismiss="modal" aria-hidden="true"
							href="javascript:void();">×</a>
					</div>
					<div class="modal-body">
						<input type="hidden" id="uid" /> <input type="hidden"
							id="parentIds" />
						<ul id="deptDemo" class="ztree"></ul>
					</div>
					<div class="modal-footer">
						<button class="btn btn-primary" id="btn_move">保存</button>
						<button class="btn" data-dismiss="modal" aria-hidden="true">关闭</button>
					</div>
				</div>
			</div>
		</div>
	</form>
	<script type="text/javascript"
		src="/three/lib/jquery/1.9.1/jquery.min.js"></script>
	<script type="text/javascript" src="/three/lib/layer/2.4/layer.js"></script>
	<script type="text/javascript" src="/three/static/h-ui/js/H-ui.min.js"></script>
	<script type="text/javascript"
		src="/three/static/h-ui.admin/js/H-ui.admin.js"></script>
	<script type="text/javascript" src="/three/static/formEdit.js"></script>
	<script type="text/javascript"
		src="/three/lib/zTree/v3/js/jquery.ztree.all.min.js"></script>
	<script type="text/javascript"
		src="/three/lib/zTree/v3/js/jquery.ztree.excheck.min.js"></script>
	<script type="text/javascript"
		src="/three/lib/zTree/v3/js/jquery.ztree.core.js"></script>
	<script type="text/javascript"
		src="/three/lib/My97DatePicker/4.8/WdatePicker.js"></script>
	<script type="text/javascript"
		src="/three/lib/datatables/1.10.0/jquery.dataTables.min.js"></script>
	<script type="text/javascript" src="/three/lib/laypage/1.2/laypage.js"></script>
	<script type="text/javascript"
		src="/three/lib/jquery.validation/1.14.0/jquery.validate.js"></script>
	<script type="text/javascript"
		src="/three/lib/jquery.validation/1.14.0/validate-methods.js"></script>
	<script type="text/javascript"
		src="/three/lib/jquery.validation/1.14.0/messages_zh.js"></script>
	<script type="text/javascript">	
	$('.table-sort').dataTable({
		"aaSorting": [[ 1, "desc" ]],//默认第几个排序
		"bStateSave": true,//状态保存
		"pading":false,
		/* "aoColumnDefs": [
		  {"orderable":false,"aTargets":[0,8]}// 不参与排序的列
		] */
	});	
	$("#form1").validate({
		rules:{
			userName:{
				required:true,
				minlength:3,
				maxlength:15
			},
			account:{
				required:true,
				minlength:3,
				maxlength:15
			},
			pass:{
				required:true,
				equalTo:"#pass1"
			}
		},
		onkeyup:false,
		focusCleanup:true
	});
	function user_move(user){
		$("#uid").val(user.userId);
		$("#parentIds").val("");
		$.ajax({
			type: 'POST',
			dataType: "json",
			url: "/three/dept/tooDept", //请求的action路径  
			async: false,
			success: function(data) {
				var setting = {
					data: {
						simpleData: {
							enable: true,
							idKey: "deptId",
							pIdKey: "parentId",
							rootPId: 0
						},
						key: {
							name: "deptName",
						}
					},
					callback: {
						onClick: deptClick
					}
				}
				$(document).ready(function() {
					$.fn.zTree.init($("#deptDemo"), setting, data);
				});
				var zNodes = data;
			}
		});		
		$("#moveModal").modal("show");
	}
	
	$("#btn_move").click(function(){		
		if($("#parentIds").val()!='' && $("#uid").val()!=''){
			$.ajax({
				type: "POST",
				url: "/three/user/move",
				dataType: "text",
				async: false,
				data: {
					userId: $("#uid").val(),
					deptId: $("#parentIds").val()
				}
			})
		}
		$("#uid").val("");
		$("#parentIds").val("");
	});
	/*验证账号是否存在开始*/
	$("#account").blur(function(){
		if($("#userId").val()==null){
			$.ajax({
					type: "POST",
					url: "/three/user/checkName",
					dataType: "text",
					async: false,
					data: {
						account: this.value
					},
					success: function(msg) {
						if (msg=="error") {
							alert("该账号已经存在，请重新输入!!!");
							$("#account").val("");
						}
					}
				});
		}
	});
	/*验证账号是否重复结束*/
	
	/*点击重置按钮开始*/
	$("#btn_reset").click(function() {
		$(".input-text").val("");
	});-
	/*点击重置按钮结束*/
	/*点击关闭和close清空数据开始*/
	$("#btn_gb,#btn_close").click(function() {
		$(".input-text").val("");
		$("#number").val("5");
	});
	/*点击关闭和清空数据结束*/
	/* 点击保存以后操作开始 */
	$("#btn_save").click(function() {
		var userValue = $("#userId").val();
		var  deptValue= $("#treeids").val();
		if(userValue == null || userValue == "") {
			if(deptValue == null || deptValue == "") {
				alert("请选择组织机构！！！");
			} else {
				$("#form1").attr("action", "/three/user/save");
				$("#form1").submit();
			}
		}else{
			$("#form1").attr("action", "/three/user/update");
			$("#form1").submit();
		} 
	});
	/* 点击保存以后结束 */

	/*点击修改的操作开始*/
	function toupdate(user) {
		$(".input-text").val("");
		$(".textarea").val("");
		$("#form1").formEdit(user);
		$("#number").val("5");
		$("#myModal").modal("show");		
	}
	/*点击修改的操作结束*/

	/*文本框焦点失去事件*/
	$("#number").click(function() {
		var number = document.getElementById("number");
		var value = number.value;
		//如果文本值为空,设置为1
		if(value == "") {
			number.value = 1;
		}
		//如果文本值为非纯数字,设置为1
		//isNaN()是否为非法数字
		if(isNaN(value)) {
			number.value = 1;
		}
		//如果文本值小于1,设置为1
		if(parseInt(value) <= 1) {
			number.value = 1;
		}

	});

	/*加号的方法开始*/
	$("#add").click(function() {
		var add = document.getElementById("add");
		var number = document.getElementById("number");
		//parseInt() 将数值型字符串转换为数值
		number.value = parseInt(number.value) + 1;
	});
	/*加号的方法结束*/

	/*减号的方法*/
	$("#subtraction").click(function() {
		//获取-号按钮
		var subtraction = document.getElementById("subtraction");
		//获取文本框
		var number = document.getElementById("number");
		if(number.value <= 1) {
			//如果文本框的值小于1,则设置值为1
			number.value = 1;
		} else {
			number.value = number.value - 1;
		}

	});
	/*减号的方法结束*/

	$("#btn_add").click(function() {
		$("#myModal").modal("show");

	});
	/*主页面的菜单树*/
	$.ajax({
		type: 'POST',
		dataType: "json",
		url: "/three/dept/tooDept", //请求的action路径  
		async: false,
		success: function(data) {
			var setting = {
				data: {
					simpleData: {
						enable: true,
						idKey: "deptId",
						pIdKey: "parentId",
						rootPId: 0
					},
					key: {
						name: "deptName",
					}
				},
				callback: {
					onClick: ztreeOnclick
				}
			}
			$(document).ready(function() {
				$.fn.zTree.init($("#tree"), setting, data);
				expandAll(); //调用写好的展开全部节点方法
			});
			var zNodes = data;
		}
	});

	function ztreeOnclick(e, treeId, treeNode) {
		var zTree = $.fn.zTree.getZTreeObj("tree"),
			nodes = zTree.getSelectedNodes(),
			ids = "";
		nodes.sort(function compare(a, b) {
			return a.id - b.id;
		});
		for(var i = 0, l = nodes.length; i < l; i++) {
			ids += nodes[i].deptId + ","; //获取选中的菜单树的id

		}
		// 将选中的id放到隐藏的文本域中
		if(ids.length > 0) ids = ids.substring(0, ids.length - 1);
		$("#form1").attr("action", "/three/user/queryUserIds?ids=" + ids);
		$("#form1").submit();
	}
	/*主页面的菜单树结束*/

	/* 完成ztree的自动展开功能开始 */
	var curStatus = "init",
		curAsyncCount = 0,
		asyncForAll = false,
		goAsync = false;
	function expandAll() {
		var zTree = $.fn.zTree.getZTreeObj("tree");
		if(asyncForAll) {

			zTree.expandAll(true);
		} else {
			expandNodes(zTree.getNodes());
			if(!goAsync) {
				curStatus = "";
			}
		}
	}
	function expandNodes(nodes) {
		if(!nodes)
			return;
		curStatus = "expand";
		var zTree = $.fn.zTree.getZTreeObj("tree");
		for(var i = 0, l = nodes.length; i < l; i++) {
			zTree.expandNode(nodes[i], true, false, false);
			if(nodes[i].isParent && nodes[i].zAsync) {
				expandNodes(nodes[i].children);
			} else {
				goAsync = true;
			}
		}
	}
	/* 完成ztree的自动展开功能结束 */
	/*下拉菜单开始*/
	$.ajax({
		type: 'POST',
		dataType: "json",
		url: "/three/dept/tooDept", //请求的action路径  
		async: false,
		success: function(data) {
			var inputsetting = {
				data: {
					simpleData: {
						enable: true,
						idKey: "deptId",
						pIdKey: "parentId",
						rootPId: 0
					},
					key: {
						name: "deptName",
					}
				},
				callback: {
					onClick: onClick
				}
			}
			$(document).ready(function() {
				$.fn.zTree.init($("#treeDemo"), inputsetting, data);
			});
		}
	});

	function onClick(e, treeId, treeNode) {
		var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
			nodes = zTree.getSelectedNodes(),
			v = "";
		ids = "";
		nodes.sort(function compare(a, b) {
			return a.id - b.id;
		});
		for(var i = 0, l = nodes.length; i < l; i++) {
			v += nodes[i].deptName + ",";
			ids += nodes[i].deptId + ",";
		}
		if(v.length > 0) v = v.substring(0, v.length - 1);
		$("#citySel").val(v);
		// 将选中的id放到隐藏的文本域中
		if(ids.length > 0) ids = ids.substring(0, ids.length - 1);
		$("#treeids").val(ids);	
	}

	function showMenu() {
		$("#citySel").val("");
		var cityObj = $("#citySel");
		var cityOffset = $("#citySel").offset();
		$("#menuContent").css({
			left:"140px",
			top: "145px"
		}).slideDown("fast");
		$("body").bind("mousedown", onBodyDown);
	}

	function hideMenu() {
		$("#menuContent").fadeOut("fast");
		$("body").unbind("mousedown", onBodyDown);
	}

	function onBodyDown(event) {
		if(!(event.target.id == "menuBtn" || event.target.id == "menuContent" || $(event.target).parents("#menuContent").length > 0)) {
			hideMenu();
		}
	}
	/*	下拉菜单结束*/

	/*获取树节点id开始*/
	function deptClick(e, treeId, treeNode) {
		var zTree = $.fn.zTree.getZTreeObj("deptDemo"),
			nodes = zTree.getSelectedNodes(),
			ids = "";
		nodes.sort(function compare(a, b) {
			return a.id - b.id;
		});
		for(var i = 0, l = nodes.length; i < l; i++) {
			ids += nodes[i].deptId + ",";
		}
		// 将选中的id放到隐藏的文本域中
		if(ids.length > 0) ids = ids.substring(0, ids.length-1);
		$("#parentIds").val(ids);
		console.log($("#parentIds").val());
	}
	/*获取树节点id结束*/	
	
	</script>
</body>
</html>